<template src="./data.html">
</template>
<script setup>
import data from '../data.js'
import { getFooterTop } from '../element'
import {
  onMounted, onUnmounted,
  ref,
  nextTick
} from 'vue'

const start = ref(0)
let end = ref(1)
const itemRefs = ref([])

function init () {
  let index = 0
  ;(function _renderMore () {
    if (index >= data.length) return
    const item = itemRefs.value[index++]
    if (item && item.getBoundingClientRect().bottom < getFooterTop()) {
      end.value++
      nextTick(_renderMore)
    }
  }())
}

function scroll () {
  const lastItem = itemRefs.value[itemRefs.value.length - 1]
  if (lastItem.getBoundingClientRect().bottom < getFooterTop()) {
    end.value++
  }
}

onMounted(() => init())
onMounted(() => document.addEventListener('scroll', scroll))
onUnmounted(() => document.removeEventListener('scroll', scroll))

function setItemRef (el, item) {
  itemRefs.value[data.indexOf(item)] = el
}
</script>
